import React, { useState, useEffect } from 'react';
import { Tree, Card, Badge, Input } from 'antd';
import {
  CodepenOutlined,
  SettingOutlined,
  FileOutlined,
  ShareAltOutlined,
} from '@ant-design/icons';
import { FormattedMessage } from 'umi';

const { Search } = Input;

const JobTreeN = (props: any) => {
  const [treeData, setTreeData] = useState<any[]>([]);
  const [selectedNode, setSelectedNode] = useState({});
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [expandedKeys, setExpandedKeys] = useState([]);

  useEffect(() => {
    props.onRef(this);
    fetchData(props.BomData,props.JobData)
  }, [props.BomData,props.JobData]);

  const fetchData = (BomData: any, JobData: any) => {
    if (BomData && BomData.boms) {
      var treeData: any = [];
      var node = {
        title: JobData.jobNum,
        subTitle: JobData.jobNum,
        key: JobData.id,
        item: JobData,
        icon: <CodepenOutlined />,
        type: 'root',
        children: mapData(BomData, '', 0),
      };
      treeData.push(node);
      setTreeData(treeData);
    }
  };

  const mapData = (BomData: any, parent: string = '', isRoot: number = 0) => {
    var treeData: any = [];
    var asmbls = BomData.boms.filter((o: any) => o.parent === parent);
    if (isRoot === 0) {
      asmbls = BomData.boms.filter((o: any) => o.parent === parent || o.parent === null);
    }
    asmbls.forEach((item: any) => {
      var boos = BomData.boos.filter(
        (o: any) =>
          o.partNum === item.partNum &&
          o.revisionNum === item.revisionNum &&
          o.assemblySeq === item.assemblySeq,
      );
      var booNodes = mapBooData(BomData, boos);
      var childNodes = mapData(BomData, item.partNum, 1);
      var children: any = [];
      booNodes.forEach((boo: any) => {
        children.push(boo);
      });
      childNodes.forEach((asmbl: any) => {
        children.push(asmbl);
      });
      var node = {
        title: item.assemblySeq + '-' + item.partNum + item.partDescription,
        subTitle: item.assemblySeq + '-' + item.partNum + item.partDescription,
        key: item.id,
        item,
        icon: <CodepenOutlined />,
        type: 'asm',
        children,
      };
      treeData.push(node);
    });

    return treeData;
  };

  const mapBooData = (BomData: any, boos: any) => {
    var treeData2: any = [];
    boos.map((item: any) => {
      var mtls = BomData.mtls.filter(
        (o: any) => o.assemblySeq === item.assemblySeq && o.relatedOperation === item.oprSeq,
      );
      var node = {
        title: (
          <span>
            {item.oprSeq + '-' + item.opDesc} {item.opComplete ? <Badge status="success" /> : ''}
          </span>
        ),
        subTitle: item.oprSeq + '-' + item.opDesc,
        key: item.id,
        item: item,
        icon: item.subContract ? <ShareAltOutlined /> : <SettingOutlined />,
        type: 'boo',
        children: mapMtlData(mtls),
      };
      treeData2.push(node);
    });
    return treeData2;
  };

  const mapMtlData = (mtls: any) => {
    var treeData3: any = [];
    mtls.map((item: any) => {
      var node = {
        title: (
          <span>
            {item.mtlSeq + '-' + item.partNum + item.partDescription}{' '}
            {item.issuedComplete ? <Badge status="success" /> : ''}
          </span>
        ),
        subTitle: item.mtlSeq + '-' + item.partNum + item.partDescription,
        key: item.id,
        item,
        icon: <FileOutlined />,
        type: 'mtl',
      };
      treeData3.push(node);
    });
    return treeData3;
  };

  const clearData = () => {
    console.log('clearData');
    setTreeData([]);
  };

  const onExpand = (expandedKeys: any) => {
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeys: any) => {
    //console.log('onCheck', checkedKeys);
  };

  const onSelect = (selectedKeys: any, info: any) => {
    if (props.setCurrentAsmb) {
      props.setCurrentAsmb(info.node.item, info.node.type, info.node);
    }
    setSelectedNode(info.node);
  };

  const getParentKey = (value: any, tree: any, expandedKeys: any = []) => {
    tree.map((item: any) => {
      if (item.subTitle.indexOf(value) > -1) {
        expandedKeys.push(item.key);
      }
      if (item.children) {
        getParentKey(value, item.children, expandedKeys);
      }
    });
  };

  const onSearch = (e: any) => {
    const { value } = e.target;
    if (!value || value === '') {
      return;
    }
    const expandedKeys: any = [];

    treeData[0].children.map((item: any) => {
      if (item.subTitle.indexOf(value) > -1) {
        expandedKeys.push(item.key);
      }
      if (item.children) {
        getParentKey(value, item.children, expandedKeys);
      }
    });
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(true);
  };

  return (
    <Card title={<FormattedMessage id="pages.manufacturingProcess" />}>
      <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onSearch} />
      <Tree
        showIcon
        checkable={false}
        draggable
        defaultExpandAll
        onExpand={onExpand}
        onCheck={onCheck}
        onSelect={onSelect}
        treeData={treeData}
        autoExpandParent={autoExpandParent}
        expandedKeys={expandedKeys}
      />
    </Card>
  );
};

export default JobTreeN;
